<template>
<!-- 设置 -->
   <div>
        <el-row>
           <el-col :span="24">
                <div id="bg-purple-dark">
                    <span style="position: relative;top:20px;left:20px;font-size:18px">{{ schemeName }}</span>
                    <span style="position: relative;top:20px;left:35px;font-size:14px;color:#909399">计薪周期：{{ salaryCycle }}</span>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-top: 30px;margin-left: 20px;">
                        <el-menu-item index="1" @click="changeHeight(1)">确认人员</el-menu-item>
                        <el-menu-item index="2" @click="changeHeight(2)">专项扣除</el-menu-item>
                        <el-menu-item index="3" @click="changeHeight(3)">社保公积金</el-menu-item>
                        <el-menu-item index="4" @click="changeHeight(4)">薪资核算</el-menu-item>
                    </el-menu>
                    <div v-if="activeIndex==1">
                        <!-- <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div> -->
                        <el-row :gutter="0">
                        <el-col :span="4">
                            <div :class="1 == number ? 'bg-purple-active':'bg-purple'" @click="tab(1)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">69人</span>
                                <br/>
                                <span style="font-size:15px;margin-left:30px;color:#909399">计薪人数</span>
                            </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="2 == number ? 'bg-purple-active':'bg-purple'" @click="tab(2)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">8人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">本月新入职</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="3 == number ? 'bg-purple-active':'bg-purple'" @click="tab(3)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">3人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">本月离职</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="4 == number ? 'bg-purple-active':'bg-purple'" @click="tab(4)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">5人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">本月调薪</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="5 == number ? 'bg-purple-active':'bg-purple'" @click="tab(5)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">58人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">正式员工</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="6 == number ? 'bg-purple-active':'bg-purple'" @click="tab(6)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">11人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">试用期</span>
                          </div>
                        </el-col>
                        </el-row>
                        
                        
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:30px;padding-top:20px;">
                          <el-button type="primary" >添加人员</el-button>
                          <el-button>批量删除</el-button>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="关键词">
                          <el-input v-model="formInline.user" placeholder="请输入关键词"></el-input>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="部门">
                          <el-select v-model="formInline.value" placeholder="请选择">
                            <el-option
                              v-for="item in options1"
                              :key="item.deptName"
                              :label="item.deptName"
                              :value="item.deptName">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="员工状态">
                          <el-select v-model="formInline.region" placeholder="员工状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="试用期" value="1"></el-option>
                            <el-option label="正式员工" value="2"></el-option>
                            <el-option label="已离职" value="3"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div v-if="activeIndex==2">
                      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:30px;padding-top:20px;">
                        &nbsp;
                        <el-form-item label="关键词">
                          <el-input v-model="formInline.user" placeholder="请输入关键词"></el-input>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="部门">
                          <el-select v-model="formInline.value" placeholder="请选择">
                            <el-option
                              v-for="item in options1"
                              :key="item.deptName"
                              :label="item.deptName"
                              :value="item.deptName">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="员工状态">
                          <el-select v-model="formInline.region" placeholder="员工状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="试用期" value="1"></el-option>
                            <el-option label="正式员工" value="2"></el-option>
                            <el-option label="已离职" value="3"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-button style="margin-left:160px;">导入</el-button>
                        <el-button>导出</el-button>
                      </el-form>
                    </div>
                    <div v-if="activeIndex==3">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:30px;padding-top:20px;">
                        &nbsp;
                        <el-form-item label="关键词">
                          <el-input v-model="formInline.user" placeholder="请输入关键词"></el-input>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="部门">
                          <el-select v-model="formInline.value" placeholder="请选择">
                            <el-option
                              v-for="item in options1"
                              :key="item.deptName"
                              :label="item.deptName"
                              :value="item.deptName">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="员工状态">
                          <el-select v-model="formInline.region" placeholder="员工状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="试用期" value="1"></el-option>
                            <el-option label="正式员工" value="2"></el-option>
                            <el-option label="已离职" value="3"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-button style="margin-left:160px;">导入</el-button>
                        <el-button>导出</el-button>
                      </el-form>
                    </div>
                    <div v-if="activeIndex==4">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:30px;padding-top:20px;">
                        <el-button type="primary" >核酸</el-button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="关键词">
                          <el-input v-model="formInline.user" placeholder="请输入关键词"></el-input>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="部门">
                          <el-select v-model="formInline.value" placeholder="请选择">
                            <el-option
                              v-for="item in options1"
                              :key="item.deptName"
                              :label="item.deptName"
                              :value="item.deptName">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-form-item label="员工状态">
                          <el-select v-model="formInline.region" placeholder="员工状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="试用期" value="1"></el-option>
                            <el-option label="正式员工" value="2"></el-option>
                            <el-option label="已离职" value="3"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-button style="margin-left:80px;">导入</el-button>
                        <el-button>导出</el-button>
                      </el-form>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark-two" style="padding-left:25px;padding-top:20px;">
                     <el-table
                      :data="tableData"
                      :header-cell-style="{background: '#f4f4f4'}"
                      border
                      style="width: 98%">
                      <el-table-column align="center" type="selection" width="55"></el-table-column>
                      <el-table-column align="center" prop="name" label="姓名" ></el-table-column>
                      <el-table-column align="center" prop="name" label="部门" ></el-table-column>
                      <el-table-column align="center" prop="name" label="职位"></el-table-column>
                      <el-table-column align="center" prop="name" label="手机号" width="150"></el-table-column>
                      <el-table-column align="center" prop="name" label="工号"></el-table-column>
                      <el-table-column align="center" prop="name" label="证件号码" width="180"></el-table-column>
                      <el-table-column align="center" prop="name" label="员工状态"></el-table-column>
                      <el-table-column align="center" prop="name" label="入职日期" width="130"></el-table-column>
                      <el-table-column
                        fixed="right"
                        label="操作">
                        <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="text">移除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                      <div style="padding-left:825px;padding-top:20px;">
                        <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="pageNum"
                          :page-sizes="[5, 10, 20, 50]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                        >
                        </el-pagination>
                      </div>
                </div>
            </el-col>
        </el-row>
   </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            formInline:{},
            activeIndex: '1',
            number:"0",
            options1: [],
            tableData: [
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }
            ],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            schemeName:this.$route.query.schemeName,
            salaryCycle:this.$route.query.salaryCycle

        }
    },
    created(){
     this.getHolidayType();//部门
     this.findSalaryByIdList();//查询
    },
    methods: {
        changeHeight(index){
            if(index==1){
                this.activeIndex=1
                var div = document.getElementById('bg-purple-dark');
                div.style.height = '310px';
            }
            if(index==2){
                this.activeIndex=2
                var div = document.getElementById('bg-purple-dark');
                div.style.height = '200px';
            }
            if(index==3){
                this.activeIndex=3
                var div = document.getElementById('bg-purple-dark');
                div.style.height = '200px';
            }
            if(index==4){
                this.activeIndex=4
                var div = document.getElementById('bg-purple-dark');
                div.style.height = '200px';
            }
        },
        tab(index){
         this.number=index
        },
        getHolidayType() {
            axios.post("ReplacementCard/findDept")
                .then((res) => {
                    console.log(res);
                    this.options1 = res.data.rows;
                })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
          this.pageSize = val;
          this.findSalaryByIdList();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
          this.pageNum = val;
          this.findSalaryByIdList();
        },
        //查询
      findSalaryByIdList() {
        
      },
        
    }

}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  #bg-purple-dark {
    background: white;
    height: 310px;
    
  }
  .bg-purple-dark-two {
    background: white;
    height: 600px;
  }
  .bg-purple {
    border-radius: 4px;
    min-height: 36px;
    border: 1px solid #c4c6c9;
    margin-left: 13px;
    position: relative;
    top: 20px;
    width: 190px;
    height: 95px;
  }
  .bg-purple-active{
    border-radius: 4px;
    min-height: 36px;
    border: 1px solid #6d9de5;
    margin-left: 13px;
    position: relative;
    top: 20px;
    width: 190px;
    height: 95px;
    color: #6d9de5;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
 
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
</style>